<template>
	<view>
		<view class="order_state">
			<view class="state_suc"></view>
			<view class="state_cont">
				<view class="state_txt">
					<text class="desc">已签收</text>
				</view>
				<view class="state_tip">您的订单已签收，祝您购物愉快</view>
			</view>
		</view>
		<view class="order_wuliu">
			<view class="wuliu_cont">
				<view class="cont_icon"><text class="icon wl_pos_icon">&#xe60f;</text></view>
				<view class="cont_text">
					<view class="wl_text">赵新 130****5778</view>
					<text class="wl_tip">吉林长春市净月区万科城一期16栋2602</text>
				</view>
			</view>
		</view>
		<view class="order_goods">
			<view class="order_shopBar"><text class="shop_desc">共计 3 件商品</text></view>
			<view class="order_good">
				<view class="good_item">
					<view class="good_cover">
						<view class="good_cover_img">
							<image src="../../static/img/emptyCart.png" class="good_img_url"></image>
						</view>
					</view>
					<view class="good_cont">
						<view class="good_info">
							<view class="good_name">
								 尚菲优品（SFYP）304不锈钢碗 双层加厚隔热汤碗饭碗 两只装耐摔耐用KL2689
							</view>
							<view class="sku_coll">
								 两只装耐摔耐用KL2689
							</view>
						</view>
						<view class="info_price">
							<view class="price">¥<text class="price_yuan">100</text></view>
							<view class="count">x1</view>
						</view>
					</view>
				</view>
			</view>
			<view class="order_good">
				<view class="good_item">
					<view class="good_cover">
						<view class="good_cover_img">
							<image src="../../static/img/emptyCart.png" class="good_img_url"></image>
						</view>
					</view>
					<view class="good_cont">
						<view class="good_info">
							<view class="good_name">
								 尚菲优品（SFYP）304不锈钢碗 双层加厚隔热汤碗饭碗 两只装耐摔耐用KL2689
							</view>
							<view class="sku_coll">
								 两只装耐摔耐用KL2689
							</view>
						</view>
						<view class="info_price">
							<view class="price">¥<text class="price_yuan">100</text></view>
							<view class="count">x1</view>
						</view>
					</view>
				</view>
			</view>
			<view class="my_links"><view class="my_links_item"><view class="link_dd">联系客服</view></view></view>
		</view>
		<view class="order_summary">
			<view class="inner_line"><text class="title">订单编号：</text><view class="content">111111111<view class="content_copy">复制</view></view></view>
			<view class="inner_line"><text class="title">下单时间：</text><view class="content">111111111</view></view>
			<view class="inner_line"><text class="title">支付方式：</text><view class="content">111111111</view></view>
			<view class="inner_line"><text class="title">配送方式：</text><view class="content">111111111</view></view>
		</view>
		<view class="line"></view>
		<view class="order_total">
			<view class="total_item">商品金额<text class="price">¥ 89.50</text></view>
			<view class="total_item">运费<text class="price">¥ 89.50</text></view>
			<view class="total_item">促销立减<text class="price">¥ 89.50</text></view>
			<view class="total_item">支付优惠<text class="price">¥ 89.50</text></view>
			<view class="total">实付金额：<text class="color_red">¥ 88.25</text></view>
		</view>
		<view class="order_btn">
			<view class="order_btn_com">
				<view class="oh_btn bg_red">测试1</view>
				<view class="oh_btn bg_border_red">测试2</view>
				<view class="oh_btn bg_white">测试3</view>
			</view>
		</view>
	</view>
</template>

<script>
</script>

<style lang='scss'>
	.order_state {
	    background-image: -webkit-gradient(linear,left top,right top,color-stop(0,#f66d70),to(#e93b3d));
	    background-image: -webkit-linear-gradient(left,#f66d70,#e93b3d);
	    background-image: linear-gradient(90deg,#f66d70,#e93b3d);
	    color: #fff;
	    padding: 12px 10px;
	    -webkit-box-align: center;
	    -webkit-align-items: center;
	    align-items: center;
	    font-size: 12px;
	    line-height: 18px;
	    position: relative;
		
		.state_suc{
			position: absolute;
		    display: inline-block;
		    width: 20px;
		    height: 20px;
		    margin-right: 10px;
			margin-top: 13px;
		    background-image: url(@/static/img/order_status_icon.png);
		    background-size: 41px 41px;
		    background-repeat: no-repeat;
		}
		.state_cont{
			padding-left: 30px;
			z-index: 5;
			
			.state_txt{
				line-height: 24px;
				position: relative;
				font-size: 12px;
				.desc{
					font-family: PingFangSC-Semibold;
					font-size: 16px;
					font-weight: 400;
				}
			}
			.state_tip{
				font-size: 12px;
			}
		}
	}
	.order_wuliu{
		background-color: #fff;
		border-radius: 0 0 6px 6px;
		.wuliu_cont{
		    padding: 11px 10px 12px;
		    -webkit-box-align: center;
		    -webkit-align-items: center;
		    align-items: center;
		    position: relative;
			
			.cont_icon{
				position: absolute;
				.wl_pos_icon{
					
				}
			}
			.cont_text{
				position: relative;
				display: inline-block;
				margin-left: 30px;
				.wl_text{
				    font-size: 14px;
				    line-height: 21px;
				    color: #333;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
				}
				.wl_tip{
				    font-size: 12px;
				    line-height: 18px;
				    color: #999;
				}
			}
		}
	}
	.order_goods{
		margin-top: 15px;
		background-color: #fff;
		.order_shopBar{
		    padding: 11px 10px;
		    font-size: 16px;
		    line-height: 24px;
		    color: #333;
		    position: relative;
		    -webkit-box-align: center;
		    -webkit-align-items: center;
		    align-items: center;
			border-bottom: 1px solid #e5e5e5;
			left: 10px;
			.shop_desc{
				font-size: 14px;
				font-weight: 400;
				vertical-align: center;
				color: #999;
			}
		}
		.order_good{
			position: relative;
			overflow: hidden;
			
			.good_item{
				padding: 10px;
				display: flex;
				.good_cover{
					display: inline-block;
				    width: 153px;
				    height: 75px;
				    overflow: hidden;
				    position: relative;
					.good_cover_img{
					    width: 100%;
					    height: 100%;
					    border-radius: 6px;
						display: inline-block;
						.good_img_url{
							position: absolute;
							width: 75px;
							height: 75px;
						}
					}
				}
				.good_cont{
					display: inline-block;
					padding-left: 10px;
					overflow: hidden;
					.good_info{
					    overflow: hidden;
					    min-height: 40px;
					    -webkit-box-orient: vertical;
					    -webkit-box-direction: normal;
					    -webkit-flex-direction: column;
					    flex-direction: column;
						.good_name{
						    font-size: 14px;
						    line-height: 21px;
						    color: #333;
						    word-break: break-all;
						}
						.sku_coll{
						    padding-top: 3px;
						    font-size: 12px;
						    line-height: 18px;
						    color: #999;
						}
					}
					.info_price{
					    margin-top: 3px;
					    line-height: 24px;
					    font-size: 12px;
						.price{
							display: inline-block;
						    color: #f2270c;
						    font-family: JDZH-Regular;
							.price_yuan{
							    font-size: 16px;
							}
						}
						.count{
							color: #999;
						    float: right;
						}
					}
				}
			}
		}
		.my_links{
		    padding: 0 10px;
		    font-size: 12px;
		    color: #999;
		    line-height: 20px;
		    align-items: center;
		    text-align: center;
		    position: relative;
			border-top: 1px solid #e5e5e5;
			left: 10px;
			.my_links_item {
			    padding: 16px 0;
			    position: relative;
				.link_add{
				    position: relative;
				    display: inline-block;
				    padding-left: 25px;
				}
			}
		}
	}
	.order_summary{
	    padding: 12px 10px;
	    border-radius: 10px;
	    overflow: hidden;
	    margin-top: 15px;
	    background-color: #fff;
		.inner_line {
		    padding-top: 3px;
		    font-size: 14px;
		    line-height: 21px;
		    position: relative;
			display: flex;
			.title{
			    min-width: 70px;
			    color: #999;
			}
			.content{
				width: 100%;
			    color: #151515;
				display: block;
				margin-top: -3px;
			    flex: 1;
				.content_copy{
				    display: inline-block;
				    border: 1px solid #ccc;
				    font-size: 12px;
				    line-height: 16px;
				    padding: 0 6px;
				    color: #999;
				    border-radius: 6px;
				    vertical-align: 1px;
					margin-left: 10px;
				}
			}
		}
	}
	.line{
		border-top: 1px solid #e5e5e5;
		margin-left: 10px;
	}
	.order_total {
	    background: #fff;
	    padding: 12px 10px 12px 10px;
	    overflow: hidden;
	    position: relative;
	    margin-bottom: 15px;
	    border-radius: 0 0 10px 10px;
		margin-bottom: 70px;
		.total_item {
		    line-height: 21px;
		    color: #333;
		    font-weight: 400;
		    position: relative;
			line-height: 26px;
			.price {
			    float: right;
			    font-family: JDZH-Regular;
			}
		}
		.total {
		    float: right;
		    margin-top: 8px;
		    font-size: 16px;
		    line-height: 24px;
			margin-right: 0px;
		    color: #333;
		    font-weight: 700;
			.color_red {
			    color: #f2270c;
			}
		}
	}
	.order_btn{
		position: fixed;
	    left: 0;
	    right: 0;
	    bottom: 0;
	    z-index: 333;
	    padding-right: 10px;
	    padding-bottom: env(safe-area-inset-bottom);
	    flex-direction: row-reverse;
	    font-size: 14px;
	    color: #333;
	    line-height: 30px;
	    box-shadow: 0 -2px 4px 0 rgba(0,0,0,.07);
		display: flex;
		background: #fff;
		.order_btn_com {
		    flex: 1;
		    justify-content: flex-start;
		    flex-direction: row-reverse;
			display: flex;
			.bg_red {
			    background-image: -webkit-linear-gradient(315deg,#f2140c,#f2270c 70%,#f24d0c);
			    background-image: linear-gradient(135deg,#f2140c,#f2270c 70%,#f24d0c);
			    box-shadow: 0 3px 6px 0 rgba(242,39,12,.2);
			    color: #fff;
			    border: none;
			    height: 30px;
			    line-height: 30px;
			}
			.bg_border_red {
			    color: #f2270c;
			    background: #fff;
			    border: 1px solid #f2270c;
			    box-shadow: 0 3px 6px 0 rgba(242,39,12,.1);
			}
			.bg_white {
			    background: #fff;
			    border: 1px solid #ccc;
			    box-shadow: 0 3px 6px 0 rgba(0,0,0,.05);
			}
			.oh_btn {
			    text-align: center;
			    width: 78px;
			    height: 28px;
			    line-height: 28px;
			    border-radius: 15px;
			    margin: 10px 0 10px 10px;
			    -webkit-flex-shrink: 0;
			    flex-shrink: 0;
			    position: relative;
			}
		}
	}
</style>